<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${envName != null ? '版本管理 - ' + envName + '环境' : '版本管理'}"></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .env-header {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
        }
        .env-dev { background-color: #ffeb3b; }
        .env-test { background-color: #2196f3; color: white; }
        .env-prod { background-color: #f44336; color: white; }
        .env-uat { background-color: #9c27b0; color: white; }
    </style>
</head>
<body>
<div id="app">
    <!-- 头部环境标识 -->
    <div class="env-header" th:classappend="${'env-' + envName}" th:text="${'当前环境: ' + envName}"></div>

    <el-header style="text-align: left; font-size: 15px;padding-left: 30px;">
        <el-row>
            <el-button @click="addClick()" type="primary">新增</el-button>

<!--            <span>     项目标识：</span>-->
<!--            <el-select v-model="project_code" clearable placeholder="请选择"-->
<!--                       :change="filterData(1)"-->
<!--                       @clear="filterData(1)">-->
<!--                <el-option-->
<!--                        v-for="item in project_codes"-->
<!--                        :key="item.value" :value="item.value"-->
<!--                        :label="item.label">-->
<!--                </el-option>-->
<!--            </el-select>-->
<!--            <span>   型号：</span>-->
<!--            <el-select v-model="model" clearable placeholder="请选择 "-->
<!--                       @change="filterData(2)"-->
<!--                       @clear="filterData(2)">-->
<!--                <el-option-->
<!--                        v-for="item in models"-->
<!--                        :key="item.value" :value="item.value"-->
<!--                        :label="item.label">-->
<!--                </el-option>-->
<!--            </el-select>-->
            <el-button @click="clearFilter">清除所有过滤器</el-button>
        </el-row>
    </el-header>


    <el-table ref="filterTable" :data="flist" border style="width: 100%">
        <div>
            <el-table-column fixed prop="id_" label="id" width="50"></el-table-column>
            <el-table-column fixed prop="remark" label="描述" width="150"></el-table-column>
            <el-table-column fixed prop="file_name" label="固件名称" ></el-table-column>
            <el-table-column fixed prop="file_path" label="固件地址" ></el-table-column>
            <el-table-column fixed prop="project_code" label="项目标识" width="150" :filters="project_codes" :filter-method="filterPcode" filter-placement="bottom-end"></el-table-column>
            <el-table-column fixed prop="version" label="版本号" width="70"></el-table-column>
            <el-table-column fixed prop="version_name" label="版本名称" width="120"></el-table-column>
            <el-table-column fixed prop="force_version" label="强制版本" width="80"></el-table-column>
            <el-table-column fixed prop="model" label="型号" width="100" :filters="models" :filter-method="filterModel" filter-placement="bottom-end"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </div>
    </el-table>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            return {
                allData: [],
                flist:[],
                project_codes: [],
                project_code:"",
                models: [],
                model:"",
                isInit:true,
                ctxPath: ""
            }
        },
        created() {
            var ctxPath = [[${ctxPath}]];
            this.ctxPath = ctxPath;
            var flist = [[${flist}]];
            var project_codes = [];
            var models = [];
            for (let i = 0; i < flist.length; i++) {
                // 把flist里的项目标识和型号去重，存入flist中
                var project_code = flist[i].project_code;
                let findVal = project_codes.find(x => x.value == project_code)
                if(findVal == null){
                    project_codes.push({
                        value: project_code,
                        label: project_code,
                        text: project_code
                    });
                }
                if(models.find(x => x.value === flist[i].model) == null){
                    models.push({
                        value: flist[i].model,
                        label: flist[i].model,
                        text: flist[i].model
                    });
                }
            }
            this.allData = JSON.parse(JSON.stringify(flist));
            this.flist = flist;
            this.project_codes = project_codes;
            this.models = models;
            console.log(("is created"))
        },
        methods: {
            filterPcode(value, row) {
                return row.project_code === value;
            },
            filterModel(value, row) {
                return row.model === value;
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            filterData(from){

                // this.flist = flist;
            },
            editClick(row){
                this.open(this.ctxPath +"/firmwareUpgrade/update", row)
            },
            deleteClick(row) {
                this.open(this.ctxPath +"/firmwareUpgrade/delete", row)
            },
            addClick(){
                this.open(this.ctxPath +"/firmwareUpgrade/add")
            },
            open(path, row) {
                window.location.href = path + '?token=' + sessionStorage.getItem("token") + (row ? "&id="+row.id_ : "" ) ;
            }
        }
    })
</script>
</html>